<template>
  <div class="container">
    <div id="main">
      <div class="top">
        <div>您的位置：<a href="/">首页</a>&gt;<a href="">排行榜</a></div>
        <div>
          <div :class="{ active: now1 == 1 }" @click="getRemen()">
            热门游戏排行
          </div>
          <div :class="{ active: now1 == 2 }" @click="getXin()">
            最新游戏排行
          </div>
          <div :class="{ active: now1 == 3 }" @click="getKe()">
            氪金游戏排行
          </div>
        </div>
        <div>
          <ul>
            <li :class="{ active: now == 1 }" @click="getAd()">安卓榜</li>
            <li :class="{ active: now == 2 }" @click="getIos()">IOS榜</li>
            <li :class="{ active: now == 3 }" @click="getHot()">好评榜</li>
            <li :class="{ active: now == 4 }" @click="getNew()">新游榜</li>
            <li :class="{ active: now == 5 }" @click="getDow()">下载榜</li>
          </ul>
        </div>
      </div>

      <ul>
        <li v-for="item in games" :key="item.id">
          <div class="left">
            <div @click="goto(item)">
              <img :src="item.icon" alt="" />
              <button>立即下载</button>
            </div>
          </div>
          <div class="middle">
            <h2>{{ item.name }}</h2>
            <p>
              {{ item.content }}
            </p>
            <p>
              {{ item.explain }}
            </p>
            <button>
              <a href="">{{ item.type }}</a>
            </button>
          </div>
          <div class="right">
            <img :src="item.pic1" alt="" />
            <img :src="item.pic2" alt="" />
            <img :src="item.pic3" alt="" />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      games: [],
      now: 1,
      now1: 1,
    };
  },
  methods: {
    goto(item) {
      this.$router.push(`/gamedetail?id=${item.id}`);
    },
    getAd() {
      this.$http.centerApi.queryAll().then((res) => {
        console.log(res);
        this.games = res.data.data;
        this.now = 1;
      });
    },
    getNew() {
      this.$http.centerApi.queryNew().then((res) => {
        console.log(res);
        this.games = res.data.data;
        this.now = 4;
      });
    },
    getDow() {
      this.$http.centerApi.queryDow().then((res) => {
        console.log(res);
        this.games = res.data.data;
        this.now = 5;
      });
    },
    getIos() {
      this.$http.centerApi.queryIos().then((res) => {
        console.log(res);
        this.games = res.data.data;
        this.now = 2;
      });
    },
    getHot() {
      this.$http.centerApi.queryHot().then((res) => {
        console.log(res);
        this.games = res.data.data;
        this.now = 3;
      });
    },
    getRemen() {
      this.$http.centerApi.queryRemen().then((res) => {
        console.log(res);
        this.games = res.data.data;
        this.now1 = 1;
      });
    },
    getXin() {
      this.$http.centerApi.queryXin().then((res) => {
        console.log(res);
        this.games = res.data.data;
        this.now1 = 2;
      });
    },
    getKe() {
      this.$http.centerApi.queryKe().then((res) => {
        console.log(res);
        this.games = res.data.data;
        this.now1 = 3;
      });
    },
  },
  mounted() {
    this.$http.centerApi.queryRemen().then((res) => {
      console.log(res);
      this.games = res.data.data;
    });
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #eeeeee;
}
#main {
  width: 1200px;
  margin: 0 auto;
  background-color: #f3f3f3;
}
.top {
  background-color: #fff;
  margin-bottom: 16px;

  > div:first-child {
    color: #666666;
    padding: 5px;
    margin-left: 20px;
    margin-bottom: 30px;
  }
  > div:nth-child(2) {
    display: flex;
    margin-bottom: 30px;
    border-bottom: 1px solid #14b9c8;
    > div {
      cursor: pointer;
      color: #666666;
      width: 200px;
      padding: 10px;
      font-size: 1.5em;
      text-align: center;
      transition: 0.2s;
    }
    > div:hover {
      border: 2px solid #14b9c8;
      border-bottom: none;
    }
    > div.active {
      border: 2px solid #14b9c8;
      border-bottom: none;
    }
  }
  > div:last-child {
    ul {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 20px;
      > li {
        padding: 10px 18px;
        border: 1px solid #14b9c8;
        border-radius: 100px;
        margin-right: 8px;
        color: #14b9c8;
        margin-bottom: 30px;
        transition: 0.5s;
        cursor: pointer;
      }
      li:hover {
        background-color: #14b9c8;
        color: #ffffff;
      }
      li.active {
        background-color: #14b9c8;
        color: white;
      }
    }
  }
}

#main > ul > li {
  background-color: #fff;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  box-shadow: 1px 1px 1px 1px #666666;
  display: flex;
  .left {
    cursor: pointer;
    margin: 30px;
    text-align: center;
    img {
      border-radius: 30px;
      width: 125px;
    }
    button {
      cursor: pointer;
      margin-top: 20px;
      padding: 8px 14px;
      background-color: #5ab770;
      border-radius: 100px;
      color: white;
    }
  }
  .middle {
    background-color: #fff;
    padding: 15px 7px;
    h2 {
      font-size: 1.4em;
      font-weight: bold;
      margin-bottom: 30px;
    }
    p {
      margin-bottom: 20px;
    }
    button {
      background-color: #fff;
      color: #5ab770;
      border-radius: 100px;
      padding: 4px 8px;
      border: 1px solid;
    }
  }
  .right {
    margin: 30px 12px;

    display: flex;

    height: 250px;
    img {
      width: 100px;
    }
  }
}
</style>
